<template>
  <el-dialog
    class="nodeNoteDialog"
    :title="$t('nodeNote.title')"
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '50%'"
    :top="isMobile ? '20px' : '15vh'"
  >
    <!-- <el-input
      type="textarea"
      :autosize="{ minRows: 3, maxRows: 5 }"
      placeholder="请输入内�?
      v-model="note"
    >
    </el-input> -->
    <div class="noteEditor" ref="noteEditorRef" @keyup.stop @keydown.stop></div>
    <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{
          $t('dialog.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
import { useI18n } from 'vue-i18n'
import { useEventBus } from '@/hooks'
import Editor from '@toast-ui/editor'
import '@toast-ui/editor/dist/toastui-editor.css' // Editor's Style
import { isMobile } from 'simple-mind-map/src/utils/index'

// 组合式API设置
const { t } = useI18n()
const { $on, $off, $emit, $once } = useEventBus()

// 响应式数据
const dialogVisible = ref(false)
const note = ref('')
const activeNodes = ref([])
const editor = ref(null)
const isMobileDevice = ref(isMobile())
const appointNode = ref(null)

// 模板引用
const noteEditorRef = ref(null)

// 监听器
watch(dialogVisible, (val, oldVal) => {
  if (!val && oldVal) {
    $emit('endTextEdit')
  }
})

// 生命周期钩子
onMounted(() => {
  $on('node_active', handleNodeActive)
  $on('showNodeNote', handleShowNodeNote)
})

onBeforeUnmount(() => {
  $off('node_active', handleNodeActive)
  $off('showNodeNote', handleShowNodeNote)
})

// 方法
const handleNodeActive = (...args) => {
  activeNodes.value = [...args[1]]
  updateNoteInfo()
}

const updateNoteInfo = () => {
  if (activeNodes.value.length > 0) {
    let firstNode = activeNodes.value[0]
    note.value = firstNode.getData('note') || ''
  } else {
    note.value = ''
  }
}

const handleShowNodeNote = (node) => {
  $emit('startTextEdit')
  if (node) {
    appointNode.value = node
    note.value = node.getData('note') || ''
  }
  dialogVisible.value = true
  nextTick(() => {
    initEditor()
  })
}

const initEditor = () => {
  if (!editor.value) {
    editor.value = new Editor({
      el: noteEditorRef.value,
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'vertical'
    })
  }
  editor.value.setMarkdown(note.value)
}

const cancel = () => {
  dialogVisible.value = false
  if (appointNode.value) {
    appointNode.value = null
    updateNoteInfo()
  }
}

const confirm = () => {
  note.value = editor.value.getMarkdown()
  if (appointNode.value) {
    appointNode.value.setNote(note.value)
  } else {
    activeNodes.value.forEach(node => {
      node.setNote(note.value)
    })
  }

  cancel()
}

// 暴露给模板的数据
// const isMobile = isMobileDevice
</script>

<style lang="less" scoped>
.nodeNoteDialog {
  .tip {
    margin-top: 5px;
    color: #dcdfe6;
  }
}
</style>
